<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理</title>
    <script src="/js/haha.js"></script>
    <style>
        .el-input {
            display: inline-block;
            width: 200px;
        }

        .el-pagination {
            padding-top: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-input v-model="queryInfo.id" placeholder="请输入管理员等级名称"></el-input>
        <el-input v-model.number="queryInfo.other" placeholder="请输入管理员权限"></el-input>

        <el-button icon="el-icon-search" @click="searchData()" circle></el-button>
        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="管理员编号" width="180" v-model="roleInfo.id">
                </el-table-column>
                <el-table-column prop="rname" label="管理员等级名称" width="180" v-model="roleInfo.name">
                </el-table-column>
                <el-table-column prop="other" label="管理员权限" v-model="roleInfo.other">
                </el-table-column>
                <el-table-column prop="state" label="状态" v-model="roleInfo.state">
                </el-table-column>
                <el-table-column prop="creatData" label="创建时间" v-model="roleInfo.createDate">
                </el-table-column>
            </el-table>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[5,10,15,20]" :page-size="5" layout="total,sizes,prev,pager,next,jumper" :total="total">
            </el-pagination>
        </template>
    </div>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                title: "",
                roleInfo: {},
                queryInfo: {},
                tableData: []
            },
            methods: {
                handleSizeChange(val) {
                    getStudentData(1, val);
                },
                handleCurrentChange(val) {
                    getStudentData(val, app.size);
                },
                searchData() {
                    getStudentData(1, 5);
                }
            }
        });
        function getRoleData(a, b) {
            app.queryInfo.pageNo = a;
            app.queryInfo.pageCount = b;
            $.post(BASE_URL + "/role", app.queryInfo, function (backData) {
                app.tableData = backData.data.currentData;
                app.total = backData.data.totalCount;
            })
        }
        getStudentData(1, 5);
    </script>

</body>

</html>